<template>
	<view class="wrap">
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="quer(item)">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.title}}
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="quer(item)">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.title}}
					</view>
				</view>
			</template>
		</u-waterfall>
		<!-- <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore> -->
	</view>
</template>

<script>
	import http from '@/pages/request/index';
	export default {
		data() {
			return {
				id:'',
				loadStatus: 'loadmore',
				flowList: [],
			}
		},
		onLoad(options) {
			this.id = options.id
			this.addRandomData();
		},
		onReachBottom() {
			// this.loadStatus = 'loading';
			// if(this.flowList.length > 10){
			// 	this.loadStatus = 'nomore'
			// }else {
			// 	// 模拟数据加载
			// 	setTimeout(() => {
			// 		this.addRandomData();
			// 		this.loadStatus = 'loadmore';
			// 	}, 1000)
			// }
		},
		methods: {
			addRandomData() {
				http('works.catalogChoose',{id:this.id}).then(res=>{
					console.log(res);
					this.flowList = res.data
				})
				// console.log(111);
				// const list = [{
				// 	title: '新款照片书新款照片书新款照片书',
				// 	image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
				// },
				// {
				// 	title: '新款照片书新款照片',
				// 	image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
				// },
				// {
				// 	title: '新款照片书新款照片书新款照片书',
				// 	image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				// }]
				// for(let i = 0; i < 3; i++) {
				// 	let item = JSON.parse(JSON.stringify(list[i]))
				// 	item.id = i
				// 	this.flowList.push(item);
				// }
			},
			quer(item){
				http('works.catalogQure',{id:this.id,formwork_id:item.id}).then(res=>{
					console.log(res);
					uni.showToast({
						title: '更换成功',
						duration: 2000,
						// image: require('@/static/images/icon_success.png')
					});
					setTimeout(()=>{
						uni.navigateBack();
					},1000)
				})
			}
		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>

<style lang="scss" scoped>
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		position: relative;
	}
	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: #333333;
		padding: 0 24rpx 16rpx;
	}
	
</style>